/**
 * single item of the menu
 */
import React from 'react';
import {
  View,
  Text,
  PixelRatio,
  TouchableNativeFeedback,
} from 'react-native';
import { Icon } from 'react-native-elements';

const MIN_WIDTH = 1 / PixelRatio.get();

export default ({
  style,
  text,
  icon,
  iconRight,             // 图标默认在左边
  border = MIN_WIDTH,    // 默认false,true则有 bottom border
  onPress,
  children,
  rippleColor = '#108eeb',
}) => {
  let finalChild = null;
  if (children) {
    finalChild = children;
  } else {
    finalChild = iconRight
      ? [<Text key={1} style={{ fontSize: 15, color: '#000' }}>{text}</Text>, <Icon key={2} size={30} {...icon} />]
      : [<Icon key={1} size={30} {...icon} />, <Text key={2} style={{ fontSize: 15, color: '#000' }}>{text}</Text>];
  }

  return (
    <TouchableNativeFeedback
      onPress={onPress}
      background={TouchableNativeFeedback.Ripple(rippleColor, false)}>
      <View
        style={[{
          borderColor: '#ccc',
          borderBottomWidth: border,
          height: 50,
          paddingHorizontal: 15,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }, style]}>
        {finalChild}
      </View>
    </TouchableNativeFeedback>
  );
};
